<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>picker demo</title>

    <link href="./picker.css" rel="stylesheet" />
</head>
<body>

            <h3>Demo（选择器）：</h3>
            <p class="btn" onclick="picker1()">demoData1</p>
            <p class="btn" onclick="picker2()">demoData2</p>
            <p class="btn" onclick="picker3()">demoData3</p>
            <div class="text">
                您选择的为：<input type="text" readonly="readonly" id="nowValue" onfocus="picker3(this)">
            </div>


<script src="./city.js"></script>
<script src="./picker.min.js"></script>
<script>
    // 选择器
    function picker1() {
        var nowValue = document.getElementById('nowValue');
        new Picker({
            "title": '请选择',//标题(可选)
            "defaultValue": nowValue.value,//默认值（可选）
            "type": 1,//需要联动级数[1、2、3]（可选、不传时默认获取数据的深度,最多3级）
            "data": cityData,//数据(必传)
            "keys": {
                "id": "Code",
                "value": "Name",
                "childData": "level"//最多3级联动
            },//数组内的键名称(必传，id、text、data)
            "callBack": function (val) {
                //回调函数（val为选择的值）
                nowValue.value = val;
            }
        });
    };

    function picker2() {
        var nowValue = document.getElementById('nowValue');
        new Picker({
            "title": '请选择',//标题(可选)
            "defaultValue": nowValue.value,//默认值-多个以空格分开（可选）
            "type": 2,//需要联动级数[1、2、3]（可选）
            "data": cityData,//数据(必传)
            "keys": {
                "id": "Code",
                "value": "Name",
                "childData": "level"//最多3级联动
            },//数组内的键名称(必传，id、text、data)
            "callBack": function (value, id) {
                //回调函数（val为选择的值）
                input.value = value;
            }
        });
    };

    function picker3(input) {
        new Picker({
            //"title": '请选择',//标题(可选)
            "defaultValue": input.value,//默认值-多个以空格分开（可选）
            "data": cityData,//数据(必传)
            "keys": {
                "id": "Code",
                "value": "Name",
                "childData": "level"//最多3级联动
            },//数组内的键名称(必传，id、text、data)
            "callBack": function (val, val2) {
                //回调函数（val为选择的值）
                input.value = val;
            }
        });
    }
</script>
</body>
</html>
